<template>
  <view class="dict-picker-container">
    <view class="dict-picker-bg" @click="disabled?show=false:show=true">

      <u-text class="dict-picker-child" v-if="value" :color="color" border="none" align="right"
        :text="getDictDefaultLabel(columns[0],value)"></u-text>

      <uvInput class="dict-picker-child" v-else :value="value" :type="type" :fixed="fixed" :disabled="true"
        :disabledColor="disabledColor" :clearable="clearable" :password="password" :maxlength="maxlength"
        :placeholder="placeholder" :placeholderClass="placeholderClass" :placeholderStyle="placeholderStyle"
        :showWordLimit="showWordLimit" :confirmType="confirmType" :confirmHold="confirmHold"
        :holdKeyboard="holdKeyboard" :focus="focus" :autoBlur="autoBlur" :disableDefaultPadding="disableDefaultPadding"
        :cursor="cursor" :cursorSpacing="cursorSpacing" :selectionStart="selectionStart" :selectionEnd="selectionEnd"
        :adjustPosition="adjustPosition" inputAlign="right" :fontSize="fontSize" :color="color" :prefixIcon="prefixIcon"
        :suffixIcon="suffixIcon" :suffixIconStyle="suffixIconStyle" :prefixIconStyle="prefixIconStyle" :border="border"
        :readonly="readonly" :shape="shape" :customStyle="customStyle" :formatter="formatter" @focus="$emit('focus')"
        @blur="$emit('blur')" @keyboardheightchange="$emit('keyboardheightchange')" @change="e => $emit('change', e)"
        @input="e => $emit('input', e)" @confirm="e => $emit('confirm', e)" @clear="$emit('clear')">
        <!-- #ifdef MP -->
        <slot name="prefix"></slot>
        <slot name="suffix"></slot>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <slot name="prefix" slot="prefix"></slot>
        <slot name="suffix" slot="suffix"></slot>
        <!-- #endif -->
      </uvInput>

    </view>

    <uvPicker :show="show" :showToolbar="showToolbar" :title="title" :columns="columns" :loading="loading"
      :itemHeight="itemHeight" :cancelText="cancelText" :confirmText="confirmText" :cancelColor="cancelColor"
      :confirmColor="confirmColor" :singleIndex="singleIndex" :visibleItemCount="visibleItemCount" keyName="label"
      :closeOnClickOverlay="closeOnClickOverlay" :defaultIndex="[getDictDefaultIndex(columns[0],value)]"
      @confirm="confirm" @close="e => $emit('close', e)" @cancel="show=false"></uvPicker>

  </view>

</template>

<script>
  import uvPicker from '@/uni_modules/uview-ui/components/u-picker/u-picker.vue';
  import uvInput from '@/uni_modules/uview-ui/components/u-input/u-input.vue';
  import props from './props.js';

  export default {
    name: 'DictPicker',
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    data() {
      return {
        show: false
      }
    },
    components: {
      uvPicker,
      uvInput
    },
    watch: {},
    methods: {
      // picker确认
      confirm(e) {
        this.$emit("input", e.value[0].value);
        // 调用u-form的验证方法
        uni.$u.formValidate(this, "change");
        this.show = false
      },
      // dict-picker根据值获取对应索引
      getDictDefaultIndex(_column, _n) {
        let _defaultIndex = 0;
        for (let i = 0; i < _column.length; i++) {
          if (_column[i].value == _n) {
            this.$emit('change', _column[i]);
            this.$emit('changeTwo', _column[i]);
            return i
          }
        }
        return _defaultIndex;
      },
      // dict-picker根据值获取对应值
      getDictDefaultLabel(_column, _n) {
        for (let i = 0; i < _column.length; i++) {
          if (_column[i].value == _n) {

            return _column[i].label
          }
        }
        return '';
      }
    },
  }
</script>

<style lang="scss" scoped>
  .dict-picker-container {
    width: 100%;

    .dict-picker-bg {
      display: flex;

      .dict-picker-child {
        flex: 1;
      }
    }
  }
</style>